<!--
 * @description: 实体列表
 * @fileName: EntityList.vue
 * @author: ssr
 * @date: 2023-01-05 15:05:25
 * @version: V1.0.0
! -->
<script setup lang="ts">
import type { IEntityObject } from "@@/apis/scn/type"
import { useScenarioStore } from "@/pinia/stores/scenario"
import { getEntityObjects } from "@@/apis/scn"
import { Close, Search } from "@element-plus/icons-vue"
import { ElMessage } from "element-plus"
import { cloneDeep, isEmpty } from "lodash-es"
import { computed, onMounted, reactive, toRefs } from "vue"

const scenarioStore = useScenarioStore()

// 状态数据
const state = reactive<{
  list: Array<IEntityObject>
  showList: Array<IEntityObject>
  loading: boolean
  searchKey: string
}>({
  list: [],
  showList: [],
  loading: true,
  searchKey: ""
})

// 解构状态数据
const { list, showList, loading, searchKey } = toRefs(state)

// 实体列表面板显示控制
const entityListShow = computed(() => {
  return !scenarioStore.entityListShow
})

// 控制对象面板显示控制
const controlObjShow = computed(() => {
  return scenarioStore.controlObjShow
})

// 当前选中实体
const currentEntityTemp = computed(() => {
  return scenarioStore.currentEntityTemp
})

/**
 * 查询实体列表
 */
function handleSearch() {
  state.loading = true

  getEntityObjects()
    .then(({ data }) => {
      state.list = data
      state.showList = cloneDeep(state.list)
    })
    .catch(() => {
      state.list = []
      state.showList = []
    })
    .finally(() => {
      state.loading = false
    })
}

/**
 * 关闭实体列表面板
 */
function handleClose() {
  scenarioStore.setEntityListShow(!scenarioStore.entityListShow)
}

/**
 * 选中实体模板
 */
function handleSelectEntityTemp(item: IEntityObject) {
  if (isEmpty(scenarioStore.currentSide)) {
    ElMessage.error("当前没有阵营，请创建阵营")
    return
  }
  scenarioStore.setCurrentEntityTemp(item)
}

/**
 * 搜索过滤
 */
function handleSearchChange() {
  state.showList = cloneDeep(
    state.list.filter((item) => {
      return item.identify.toLowerCase().includes(state.searchKey.toLowerCase())
    })
  )
}

// 组件挂载时加载数据
onMounted(() => {
  handleSearch()
})
</script>

<template>
  <div
    class="edit-scenario-entitylist"
    :class="{ 'hidden': entityListShow, 'control-show': controlObjShow }"
  >
    <div class="wrapper">
      <div class="toolbar">
        <span class="title">实体列表</span>
        <el-link :underline="false" @click="handleClose">
          <el-icon :size="16">
            <Close />
          </el-icon>
        </el-link>
      </div>

      <div class="toolbar search">
        <el-input
          v-model="searchKey"
          clearable
          @change="handleSearchChange"
        >
          <template #suffix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>

      <div class="container">
        <el-scrollbar>
          <el-empty v-if="showList.length === 0" description="暂无数据" />

          <ul v-else class="entity-list">
            <li
              v-for="item in showList"
              :key="item.id"
              class="entity-item"
              :class="{ active: currentEntityTemp && item.id === currentEntityTemp.id }"
              draggable
              @click="handleSelectEntityTemp(item)"
            >
              <SvgIcon
                class="entity-icon"
                :name="`scenario-${item.entityType?.kind}-${item.entityType?.domain}-${item.entityType?.category}`"
                :color="currentEntityTemp && item.id === currentEntityTemp.id ? 'var(--el-color-primary)' : '#fff'"
              />
              <span>{{ item.assistIdentify }}</span>
            </li>
          </ul>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$toolbar-width: 260px;

.edit-scenario-entitylist {
  position: absolute;
  height: calc(100%);
  width: $toolbar-width;
  top: 0px;
  right: 0;
  z-index: 999;
  transition: width 0.3s ease;
  background-color: rgba(100, 101, 102, 0.39);
  border-radius: 5px;

  &.hidden {
    width: 0;
  }

  &.control-show {
    transform: translateX(-50px);
    transition: all 0.3s ease;
  }

  &.hidden.control-show {
    transform: translateX(0);
  }

  .wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .container {
    padding: 0 0 15px 0;
    flex: 1;
    overflow: hidden;
    color: white;
  }
}

// 头部工具栏
.toolbar {
  color: white;
  padding: var(--main-padding) var(--main-padding) 0 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .title {
    &::before {
      display: inline-block;
      height: 21px;
      width: 5px;
      background-color: var(--el-color-primary);
      margin-right: 10px;
      vertical-align: middle;
      content: "";
    }
  }

  &.search {
    padding: 10px;
  }
}

// 实体列表
.entity-list {
  list-style: none;
  padding: 0 12px 12px 12px;
  margin: 0;
}

.entity-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  margin-bottom: 4px;

  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .entity-icon {
    height: 16px !important;
    width: 16px !important;
    margin-right: 8px;
  }

  &.active {
    color: var(--el-color-primary);
    background-color: rgba(var(--el-color-primary-rgb), 0.1);
  }
}

:deep(.el-input__wrapper) {
  background-color: rgb(234, 238, 251) !important;
}
:deep(.el-input__inner) {
  color: #333;
}
</style>
